<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <title>原神语音合成</title>
    <script>
        
            var params = {
            "text":"",
            "speaker":"",
            "noise":"",
            "noisew":"",
            "length":"",
            "format":""};
            var defaultparams = {
            "noise":"0.667",
            "noisew":"0.8",
            "length":"1.2"};
            
        function current() {
				var d = new Date(),
					str = '';
				str += d.getMonth() + 1 + '月'; //获取当前月份（0——11） 
				str += d.getDate() + '日';
				str += d.getHours() + '时';
				str += d.getMinutes() + '分';
				str += d.getSeconds() + '秒';
				return str}
        function write_audio() {
            for (let key in params) {
                params[key] = document.getElementById(key).value};
            var src = `http://233366.proxy.nscc-gz.cn:8888/?text=${params["text"]}&speaker=${params["speaker"]}&noise=${params["noise"]}&noisew=${params["noisew"]}&length=${params["length"]}&format=${params["format"]}`;
            var metadata = params["speaker"]+":"+params["text"];
            var codesOfAudio = `<video controls="" autoplay="" name="media"><source src="${src}"type="audio/mpeg"></video>`;
            // document.getElementById("audio").innerHTML = finnal
            var codesOfCard = `
            <div class="card">
                <div class="card-header">${metadata}</div>
                <div class="card-body">${codesOfAudio}</div> 
                <div class="card-footer">${current()}</div>
            </div>`;
            var audioDiv = document.getElementById("audioDiv");
            audioDiv.innerHTML += codesOfCard}
        function resetById(id) {
            document.getElementById(id).value = defaultparams[id];}
    </script>
</head>
<body>
    <div class="container mt-3">
        <p class="h1">VITS 原神语音合成<p>
        <div class="row">
            <div class="col">
                <div class="form-floating">
                    <select id="speaker" class="form-select">
                        <option value="派蒙">派蒙</option>
                        <option value="凯亚">凯亚</option>
                        <option value="安柏">安柏</option>
                        <option value="丽莎">丽莎</option>
                        <option value="琴">琴</option>
                        <option value="香菱">香菱</option>
                        <option value="枫原万叶">枫原万叶</option>
                        <option value="迪卢克">迪卢克</option>
                        <option value="温迪">温迪</option>
                        <option value="可莉">可莉</option>
                        <option value="早柚">早柚</option>
                        <option value="托马">托马</option>
                        <option value="芭芭拉">芭芭拉</option>
                        <option value="优菈">优菈</option>
                        <option value="云堇">云堇</option>
                        <option value="钟离">钟离</option>
                        <option value="魈">魈</option>
                        <option value="凝光">凝光</option>
                        <option value="雷电将军">雷电将军</option>
                        <option value="北斗">北斗</option>
                        <option value="甘雨">甘雨</option>
                        <option value="七七">七七</option>
                        <option value="刻晴">刻晴</option>
                        <option value="神里绫华">神里绫华</option>
                        <option value="戴因斯雷布">戴因斯雷布</option>
                        <option value="雷泽">雷泽</option>
                        <option value="神里绫人">神里绫人</option>
                        <option value="罗莎莉亚">罗莎莉亚</option>
                        <option value="阿贝多">阿贝多</option>
                        <option value="八重神子">八重神子</option>
                        <option value="宵宫">宵宫</option>
                        <option value="荒泷一斗">荒泷一斗</option>
                        <option value="九条裟罗">九条裟罗</option>
                        <option value="夜兰">夜兰</option>
                        <option value="珊瑚宫心海">珊瑚宫心海</option>
                        <option value="五郎">五郎</option>
                        <option value="散兵">散兵</option>
                        <option value="女士">女士</option>
                        <option value="达达利亚">达达利亚</option>
                        <option value="莫娜">莫娜</option>
                        <option value="班尼特">班尼特</option>
                        <option value="申鹤">申鹤</option>
                        <option value="行秋">行秋</option>
                        <option value="烟绯">烟绯</option>
                        <option value="久岐忍">久岐忍</option>
                        <option value="辛焱">辛焱</option>
                        <option value="砂糖">砂糖</option>
                        <option value="胡桃">胡桃</option>
                        <option value="重云">重云</option>
                        <option value="菲谢尔">菲谢尔</option>
                        <option value="诺艾尔">诺艾尔</option>
                        <option value="迪奥娜">迪奥娜</option>
                        <option value="鹿野院平藏">鹿野院平藏</option>
                    </select>
                    <label for="speaker" >角色:</label>
                </div>
            </div>
            <div class="col">
                <div class="form-floating">
                    <select id="format" class="form-select">
                        <option value="mp3">mp3</option>
                        <option value="wav">wav</option>
                    </select>
                    <label for="format" class="form-label">输出格式:</label>
                </div>
            </div>
        </div>

        <div class="mb-3 mt-3">
            
            <div class="row">
                <div class="col">
                    <label for="noise" class="form-label">感情系数:</label>
                    <label id="showNoise" for="noise" class="form-label">0.667</label>
                    <input id="noise" class="form-range" type="range" min="0" max="2" value="0.667" step="0.001" onchange="document.getElementById('showNoise').innerHTML=value">
                    <button class="btn btn-secondary" onclick="resetById('noise');document.getElementById('showNoise').innerHTML=0.667">重置</button>
                </div>
                <div class="col">
                    <label for="noisew" class="form-label">音素发音长度:</label>
                    <label id="showNoisew" for="noisew" class="form-label">0.8</label>
                    <input id="noisew" class="form-range" type="range" min="0" max="2" value="0.8" step="0.01" onchange="document.getElementById('showNoisew').innerHTML=value">
                    <button class="btn btn-secondary" onclick="resetById('noisew');document.getElementById('showNoisew').innerHTML=0.667">重置</button>          
                </div>
                <div class="col">
                    <label for="length" class="form-label">语速:</label>
                    <label id="showLength" for="length" class="form-label">1.2</label>
                    <input id="length" class="form-range" type="range" min="0" max="2" value="1.2" step="0.01" onchange="document.getElementById('showLength').innerHTML=value">
                    <button class="btn btn-secondary" onclick="resetById('length');document.getElementById('showLength').innerHTML=0.667">重置</button>
                </div>
            </div>
        </div>

        <div class="form-floating">
            <textarea class="form-control" placeholder="请输入文本..." id="text" style="height: 100px"></textarea>
            <label for="text">文本</label>
        </div>
        <br>
        <button type="button" class="btn btn-primary" onclick="write_audio()">生成</button>
        <br>
        <div id="audioDiv"></div>

        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
          

                    <div class="modal-header">
                        <h4 class="modal-title">Designed by Cr</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
            

                    <div class="modal-body">
                        <p>1.请勿用于商业用途</p>
                        <p>2.作者不玩原神</p>
                        <p>3.玩的开心:D</p>
                    </div>
            

                    <div class="modal-footer">
                        
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭(/＞皿<)/ ~ ┴┴</button>
                    </div>
          
                </div>
            </div>
        </div>
        <p data-bs-toggle="modal" data-bs-target="#myModal" align='center'><u>关于网站</u></p>
            

</body>
</html>